<template>
    <el-aside :width="isCollapse?'67px':'250px' ">
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            @select="selectFn"
            router
            :collapse="isCollapse"
            background-color="#304156"
            text-color="#fff"
            active-text-color="#409EFF">
            <div class="logo">
                <img :src="isCollapse?logo2:logo" alt="" width="80%">
            </div>
            <!-- 循环数据，加载侧边栏，数据来源于configure.js -->
            <div v-for="(item,index) in listData" :key="index">
                <!-- v-if !tem.hidden==true 表示不显示-->
                <el-menu-item :index="item.path" v-if="!item.meta.hidden && !item.children || item.meta.level==1">
                    <i :class="item.meta.iconfont"></i>
                    <span slot="title">{{item.meta.name}}</span>
                </el-menu-item>
                <el-submenu :index="item.path" v-if="!item.meta.hidden && item.children && item.meta.level!=1">
                    <template slot="title">
                        <i :class="item.meta.iconfont"></i>
                        <span v-show="!isCollapse">{{item.meta.name}}</span>
                    </template>
                    <el-menu-item :index="lists.path" v-for="(lists,indexs) in item.children" :key="indexs">{{lists.meta.name}}</el-menu-item>
                </el-submenu>
            </div>
        </el-menu>
    </el-aside>
</template>

<script>
import routerArr from '@/router/configure.js' //配置路由的参数
export default {
    data(){
        return{
            listData:routerArr,
            logo:require('./logo.png'),
            logo2:require('./logo2.png'),
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        selectFn(key,keyPath){
            console.log(key, keyPath);
        }
    },
    created(){
        console.log(this.listData)
    },
    computed:{
        //判断侧边栏是否开启
        isCollapse(){
            return this.$store.state.switchs
        }
    }
}
</script>

<style scoped>
.el-aside{
    background-color:#304156;
    overflow: hidden;
    box-shadow:2px 0 6px rgba(0,21,41,.35);
    position: relative;
    z-index: 100;
    transition: all 0.2s;
	-moz-transition: all 0.2s;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
}
.el-menu{
    width:100%;
    border:0px;
}
.logo{
    background:#002140;
    padding-top:10px;
    /* padding-bottom:18px; */
    height: 50px;
    width:100%;
}
.logo img{
    display: block;
    margin:0px auto;
}
.el-submenu .el-menu-item{
    height:40px;
    line-height:40px;
    padding:0px !important;
    padding-left:53px !important;
    background-color:#273240 !important;
}
.el-submenu .el-menu-item:hover{
    background-color:#001528 !important;
}
.iconfont{
    width:24px;
    font-size: 18px;
    margin-right: 5px;
    vertical-align:middle;
    text-align:center;
    display: inline-block;
}
</style>